﻿@using CID.Web.Support
<script src="@Url.Content("~/Scripts/jquery.format.1.05.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/codemirror.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/codemirror.xmlpure.js")" type="text/javascript"></script>

<script id="ParameterValuesGroupTemplate" type="text/x-jquery-tmpl">
    <h3><a href="#">${Name}</a></h3>
    <div data-bind="template:{name: GetParameterValueEditorTemplateName, foreach: ParameterValues, afterRender: AfterPameterValueEditorRender, templateOptions: {GroupedBy: GroupedBy} }"></div>
</script>

<script id="StringEditorTemplate" type="text/x-jquery-tmpl">
    <div class="editor-label">
    {{if $item.GroupedBy() === 'Parameter' }}
        <label>${Environment}</label>
    {{/if}}
    {{if $item.GroupedBy() === 'Environment' }}
        <label>${Parameter}</label>
    {{/if}}
    </div>
    <div class="editor-field">
        <input class="text-box single-line" type="text" data-bind="value: StringValue"></input>
    </div>
</script>

<script id="IntegerEditorTemplate" type="text/x-jquery-tmpl">
    <div class="editor-label">
    {{if $item.GroupedBy() === 'Parameter' }}
        <label>${Environment}</label>
    {{/if}}
    {{if $item.GroupedBy() === 'Environment' }}
        <label>${Parameter}</label>
    {{/if}}
    </div>
    <div class="editor-field">
        <input class="text-box single-line integer-input" type="text" data-bind="value: IntegerValue"></input>
    </div>
</script>

<script id="DecimalEditorTemplate" type="text/x-jquery-tmpl">
    <div class="editor-label">
    {{if $item.GroupedBy() === 'Parameter' }}
        <label>${Environment}</label>
    {{/if}}
    {{if $item.GroupedBy() === 'Environment' }}
        <label>${Parameter}</label>
    {{/if}}
    </div>
    <div class="editor-field">
        <input class="text-box single-line decimal-input" type="text" data-bind="value: DecimalValue"></input>
    </div>
</script>

<script id="BooleanEditorTemplate" type="text/x-jquery-tmpl">
    <div class="editor-label">
    {{if $item.GroupedBy() === 'Parameter' }}
        <label>${Environment}</label>
    {{/if}}
    {{if $item.GroupedBy() === 'Environment' }}
        <label>${Parameter}</label>
    {{/if}}
    </div>
    <div class="editor-field">
        <input class="check-box" type="checkbox" data-bind="checked: BooleanValue"></input>
    </div>
</script>

<script id="DateTimeEditorTemplate" type="text/x-jquery-tmpl">
    <div class="editor-label">
    {{if $item.GroupedBy() === 'Parameter' }}
        <label>${Environment}</label>
    {{/if}}
    {{if $item.GroupedBy() === 'Environment' }}
        <label>${Parameter}</label>
    {{/if}}
    </div>
    <div class="editor-field">
        <input class="text-box single-line date-input" type="text" data-bind="value: DateTimeValue"></input>
    </div>
</script>

<script id="UniqueIdentifierEditorTemplate" type="text/x-jquery-tmpl">
    <div class="editor-label">
    {{if $item.GroupedBy() === 'Parameter' }}
        <label>${Environment}</label>
    {{/if}}
    {{if $item.GroupedBy() === 'Environment' }}
        <label>${Parameter}</label>
    {{/if}}
    </div>
    <div class="editor-field">
        <input class="text-box single-line unique-identifier-input" type="text" data-bind="value: UniqueIdentifierValue"></input>
    </div>
</script>

<script id="XmlEditorTemplate" type="text/x-jquery-tmpl">
    <div class="editor-label">
    {{if $item.GroupedBy() === 'Parameter' }}
        <label>${Environment}</label>
    {{/if}}
    {{if $item.GroupedBy() === 'Environment' }}
        <label>${Parameter}</label>
    {{/if}}
    </div>
    <div class="editor-field">
        <textarea class="text-box multi-line xml-input" data-bind="value: XmlValue"></textarea>
    </div>
</script>

<script type="text/javascript">
    var ENVIRONMENT = "Environment";
    var PARAMETER = "Parameter";

    function MapParameterValue(options) {
        var pv = options.data;
        return new ParameterValue(pv.Id, pv.ParameterId, pv.Parameter, pv.ParameterType, pv.EnvironmentId, pv.Environment, 
            pv.StringValue, pv.IntegerValue, pv.DateTimeValue, pv.DecimalValue, pv.BooleanValue, pv.UniqueIdentifierValue, pv.XmlValue);
    }

    function ParameterValue(id, parameterId, parameterName, parameterType, environmentId, environment, stringValue, integerValue, dateTimeValue, decimalValue, booleanValue, uniqueIdentifierValue, xmlValue) {
        this.Id = ko.observable(id);
        this.Parameter = ko.observable(parameterName);
        this.ParameterId = ko.observable(parameterId);
        this.ParameterType = ko.observable(parameterType);
        this.EnvironmentId = ko.observable(environmentId);
        this.Environment = ko.observable(environment);
        this.StringValue = ko.observable(stringValue);
        this.IntegerValue = ko.observable(integerValue);
        this.DateTimeValue = ko.observable(dateTimeValue);
        this.DecimalValue = ko.observable((decimalValue)?decimalValue.toString() : "");
        this.BooleanValue = ko.observable(booleanValue);
        this.UniqueIdentifierValue = ko.observable(uniqueIdentifierValue);
        this.XmlValue = ko.observable(xmlValue);
    }

    function ParameterValueGroup(name, groupedBy) {
        this.Name = ko.observable(name);
        this.GroupedBy = ko.observable(groupedBy);
        this.ParameterValues = ko.observableArray([]);
        this.GetParameterValueEditorTemplateName = function (parameterValue) {
            return parameterValue.ParameterType() + "EditorTemplate";
        };
        this.AfterPameterValueEditorRender = function (element) {
            var parent = $(element).parent();

            parent.find(".integer-input").format({ precision: 0, autofix: true });
            parent.find(".decimal-input").format({ precision: 4, autofix: true, decimal: '@Html.GetCurrentDecimalSeparator()' });
            parent.find(".unique-identifier-input").format({ type: "unique-identifier", autofix: true }, function () { $(this).val(""); });
            parent.find(".date-input").datepicker({ dateFormat: '@Html.GetCurrentDateFormat()' });
            parent.find(".xml-input").each(function (index, element) {
                var editor = CodeMirror.fromTextArea(element, {
                    mode: { name: "xml", htmlMode: false },
                    lineNumbers: true,
                    theme: "neat"
                });
                editor.setOption("onBlur", function () {
                    editor.save();
                    //need to trigger the change event so that knockout picks up the changes
                    if (document.createEvent && element.dispatchEvent) {
                        var evt = document.createEvent("HTMLEvents");
                        evt.initEvent("change", true, true);
                        element.dispatchEvent(evt); // for DOM-compliant browsers
                    } else if (element.fireEvent) {
                        element.fireEvent("onchange"); // for IE
                    }
                });

            });
        };

        this.SortParameterValuesByParameter = function() {
            this.ParameterValues().sort(function (left, right) {
                return (left.Parameter() == right.Parameter()) ? 0 :
                ((left.Parameter() < right.Parameter()) ? -1 : 1);
            });
        };

        this.SortParameterValuesByEnvironment = function() {
            this.ParameterValues().sort(function (left, right) {
                return (left.Environment() == right.Environment()) ? 0 :
                ((left.Environment() < right.Environment()) ? -1 : 1);
            });
        };
    }

    function ParameterValuesList(parameterValues) {
        this.DisplayBy = ko.observable(ENVIRONMENT);
        this.DisplayByOptions = ko.observableArray([ENVIRONMENT, PARAMETER]);
        this.ParameterValues = ko.observableArray(parameterValues);
        this.ParameterValuesByEnvironment = ko.observableArray([]);
        this.ParameterValuesByParameter = ko.observableArray([]);

        this.DisplayByEnvironment = ko.dependentObservable(function () { return (this.DisplayBy() == ENVIRONMENT); }, this);
        this.DisplayByParameter = ko.dependentObservable(function () { return (this.DisplayBy() == PARAMETER); }, this);

        this.GetGroupForEnvironment = function (environmentName) {
            for (var i = 0; i < this.ParameterValuesByEnvironment().length; i++) {
                if (this.ParameterValuesByEnvironment()[i].Name() == environmentName)
                    return this.ParameterValuesByEnvironment()[i];
            }
            var result = new ParameterValueGroup(environmentName, ENVIRONMENT);
            this.ParameterValuesByEnvironment().push(result);
            return result;
        };

        this.GetGroupForParameter = function (parameterName) {
            for (var i = 0; i < this.ParameterValuesByParameter().length; i++) {
                if (this.ParameterValuesByParameter()[i].Name() == parameterName)
                    return this.ParameterValuesByParameter()[i];
            }
            var result = new ParameterValueGroup(parameterName, PARAMETER);
            this.ParameterValuesByParameter().push(result);
            return result;
        };

        for (var i = 0; i < this.ParameterValues().length; i++) {
            var parameterValue = this.ParameterValues()[i];
            this.GetGroupForEnvironment(parameterValue.Environment()).ParameterValues().push(parameterValue);
            this.GetGroupForParameter(parameterValue.Parameter()).ParameterValues().push(parameterValue);
        }
        this.ParameterValuesByEnvironment().sort(function (left, right) {
            return (left.Name() == right.Name()) ? 0 :
                ((left.Name() < right.Name()) ? -1 : 1);
        });
        this.ParameterValuesByParameter().sort(function (left, right) {
            return (left.Name() == right.Name()) ? 0 :
                ((left.Name() < right.Name()) ? -1 : 1);
        });

        for (var i = 0; i < this.ParameterValuesByEnvironment().length; i++)
            this.ParameterValuesByEnvironment()[i].SortParameterValuesByParameter();

        for (var i = 0; i < this.ParameterValuesByParameter().length; i++)
            this.ParameterValuesByParameter()[i].SortParameterValuesByEnvironment();
    }
</script>
